<template>
    <div id="playList" class="list">
        <div class="list-hd">
            <div class="list-hd-con">
                <h4>播放列表(
                    <span class="j-flag">{{ playerList.length }}</span>)</h4>
                <a href="javascript:;" class="addall">
                    <span class="ico ico-add"></span>收藏全部
                </a>
                <span class="line"></span>
                <a href="javascript:;" class="clear">
                    <span class="ico icn-del"></span>清除
                </a>
                <p class="lytit f-ff0 f-thide j-flag">{{playName}}</p>
                <span class="close" @click="$emit('on-close', false)">关闭</span>
            </div>
        </div>

        <div class="list-bd">
            <img class="imgbg j-flag" :src="playerList[currentPlayIndex].picUrl" style="top: -360px;">

            <div class="list-flag">
                <ul>
                    <li 
                        v-for="(item,index) in playerList" 
                        :key="index" 
                        :data-id="item.id" 
                        :data-index="index" 
                        @dblclick="dblClickPlay(index)"
                        :class="{active: currentPlayIndex === index}"
                    >
                        <div class="col col-1">
                            <div class="playicn" v-if="currentPlayIndex === index"></div>
                        </div>
                        <div class="col col-2">{{item.name}}</div>
                        <div class="col col-3">
                            <div class="icons">
                                <i class="ico icn-del" title="删除" data-action="delete">删除</i>
                                <i class="ico ico-dl" title="下载" data-action="download">下载</i>
                                <i class="ico ico-share" title="分享" data-action="share">分享</i>
                                <i class="j-t ico ico-add" title="收藏" data-action="like">收藏</i>
                            </div>
                        </div>
                        <div class="col col-4">
                            <span :title="item.author">
                                <a class="" href="/artist?id=12085562" hidefocus="true">{{item.author}}</a>
                            </span>
                        </div>
                        <div class="col col-5">{{item.duration}}</div>
                        <div class="col col-6">
                            <a href="javascript:;" class="ico ico-src ico-src-dis" title="暂无来源" data-action="link">来源</a>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="list-lyric" ref="lyricWrap" v-show="hasShowLyric"></div>
        </div>
    </div>
</template>
<script>
    import { mapMutations, mapState } from 'vuex';

    export default {
        name: 'playList',

        data(){
            return {
                hasShowLyric: true
            }
        },

        computed: {
            ...mapState([
                'playerList',
                'currentPlayIndex',
                'currentPlayLyric'
            ]),
            playName(){
                return this.playerList[this.currentPlayIndex].name
            }
        },

        mounted(){
            this.$music = GLOBAL.vbus.$music;
            
            this.updatedLyric();
            this.$music.on('change', this.updatedLyric);
        },

        methods: {
            ...mapMutations([
                'setCurrentPlayIndex'
            ]),
            /**
             * 获取歌词-更新歌词到页面
            */
            updatedLyric() {
                this.$store.dispatch('getPlayLyric', {
                    id: this.playerList[this.currentPlayIndex].id
                }).then(() => {
                    
                    /** 如没歌词则隐藏 */
                    if(this.currentPlayLyric === '') {
                        this.hasShowLyric = false;
                        return;
                    };

                    this.hasShowLyric = true;
                    
                    /** 切换歌曲销毁上一首的歌词和事件 */
                    if(this.$refs.lyricWrap.childNodes.length){
                        this.$music.__lyric__.unbind(this.$music);
                        this.$refs.lyricWrap.innerHTML = '';
                    }

                    this.$music.lyric(this.currentPlayLyric, this.$refs.lyricWrap);
                    this.$music.__lyric__.show();
                });
            },
            /**
             * 双击事件 - 双击播放，提交当前点击的索引触发播放
             */
            dblClickPlay(index){
                this.$store.commit('setCurrentPlayIndex', index);
            }
        }
    }
</script>
<style lang="scss" scoped="true">
    $playlist-bg: url(../../../assets/images/playlist_bg.png) no-repeat;
    $playlist: url(../../../assets/images/playlist.png) no-repeat;

    .list {
        position: absolute;
        left: 50%;
        bottom: 47px;
        width: 986px;
        height: 301px;
        margin-left: -493px;

        .imgbg {
            position: absolute;
            left: 2px;
            top: -360px;
            z-index: 1;
            width: 980px;
            height: auto;
            opacity: .2;
            filter: Alpha(opacity=20);
        }

        .close,
        .playicn,
        .ico {
            background: $playlist;
        }

        .ico {
            height: 16px;
            font-size: 0;
        }

        .list-hd {
            background: $playlist-bg;
            padding: 0 5px;
            background-position: 0 0;
            height: 41px;

            .ico {
                float: left;
                margin: 1px 6px 0 0;
            }

            a {
                color: #ccc;

                &:hover{
                    color: #e2e2e2;

                    .ico-add {
                        background-position: -24px -20px;
                    }

                    .icn-del {
                        background-position: -51px -20px;
                    }
                }
            }

            h4 {
                margin-left: 25px;
                height: 39px;
                line-height: 39px;
                font-size: 14px;
                color: #e2e2e2;
            }

            .clear,
            .addall {
                position: absolute;
                left: 490px;
                top: 12px;
                height: 15px;
                line-height: 15px;
                cursor: pointer;
            }
            .addall {
                left: 398px;

            }

            .ico-add {
                width: 16px;
                background-position: -24px 0;
            }
            .icn-del {
                width: 13px;
                background-position: -51px 0;
            }

            .line {
                position: absolute;
                top: 13px;
                left: 477px;
                height: 15px;
                border-left: 1px solid #000;
                border-right: 1px solid #2c2c2c;
            }

            .lytit {
                position: absolute;
                left: 595px;
                top: 0;
                width: 346px;
                text-align: center;
                height: 39px;
                line-height: 39px;
                color: #fff;
                font-size: 14px;
            }

            .close {
                position: absolute;
                top: 6px;
                right: 8px;
                width: 30px;
                height: 30px;
                overflow: hidden;
                text-indent: -999px;
                cursor: pointer;
                background: $playlist;
                background-position: -195px 9px;
            }
        }

        .list-bd {
            position: absolute;
            left: 0;
            top: 41px;
            width: 976px;
            height: 260px;
            overflow: hidden;
            background: $playlist-bg;
            background-position: -1014px 0;
            background-repeat: repeat-y;
            padding: 0 5px;
            overflow: hidden;

            &::before{
                content: '';
                position: absolute;
                left: 2px;
                top: 0;
                z-index: 3;
                width: 552px;
                height: 260px;
                background: #121212;
                opacity: .5;
                filter: Alpha(opacity=50);
            }
        }

        .list-flag{
            position: absolute;
            left: 2px;
            top: 0;
            z-index: 4;
            height: 260px;
            width: 553px;
            overflow: auto;
            
            /* 滚动条整体样式 */
            &::-webkit-scrollbar {
                width: 6px;    
                height: 1px;
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: #464443;
                border: 1px solid rgba(152, 152, 152, 0.37);
                opacity: .8;
                filter: Alpha(opacity=80);
            }
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: #000;
            }

            li{
                color: #ccc;
                float: left;
                width: 100%;

                a{
                    color: #9b9b9b;
                }

                &.active,&:hover{
                        background-color: rgba(0,0,0,0.4);
                        color: #fff;

                    .icons{
                        display: block;
                    }
                }

               .playicn {
                    margin-top: 8px;
                    width: 10px;
                    height: 13px;
                    background-position: -182px 0;
                }

                &:hover a,&:hover .col-5,  &.active a, &.active .col-5{
                    color: #fff;
                }

                .col {
                    float: left;
                    padding-left: 10px;
                    height: 28px;
                    line-height: 28px;
                    overflow: hidden;
                    cursor: pointer;

                    .ico {
                        float: right;
                        overflow: hidden;
                        margin: 7px 0 0 10px;
                        text-indent: -9999px;
                    }
                }

                .icn-del {
                    width: 13px;
                    background-position: -51px 0;
                }

                .col-2,.col-4 {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .col-1 {
                    width: 10px;
                }

                .col-2 {
                    width: 256px;
                }

                .col-3 {
                    width: 78px;
                    position: relative;
                }

                .col-4 {
                    width: 70px;
                }

                .col-5 {
                    width: 35px;
                    color: #666;
                }

                .col-6 {
                    width: 37px;
                    padding-left: 6px;
                }

                .icons{
                    display: none;
                }
                .ico-add {
                    width: 16px;
                    background-position: -24px 0;
                }

                    .ico-add:hover, a:hover .ico-add {
                    background-position: -24px -20px;
                }

                    .ico-share {
                    width: 14px;
                    background-position: 0 0;
                }

                    .ico-share:hover, a:hover .ico-share {
                    background-position: 0 -20px;
                }

                    .icn-del {
                    width: 13px;
                    background-position: -51px 0;
                }

                    .icn-del:hover, a:hover .icn-del {
                    background-position: -51px -20px;
                }

                    .ico-dl {
                    width: 14px;
                    background-position: -57px -50px;
                }

                    .ico-dl:hover, a:hover .ico-dl {
                    background-position: -80px -50px;
                }

                    .col .icn-migu {
                    width: 16px;
                    height: 16px;
                    margin: 6px 7px 0 0;
                    background-position: -100px -50px;
                    cursor: default;
                }

                .ico-src {
                    width: 14px;
                    margin-left: 0;
                    background-position: -80px 0px ;

                    &:hover{
                        background-position: -80px -20px ;
                    }
                }

            }
        }
    }
</style>